<template>
    <div class="bigbox">
        <shopheader title="购物车" :tnum="tnum"></shopheader>
        <shopcontent :tmoney="tmoney" :adds="adds" :subs="subs" :tnum="tnum" :shuju="shopcardata"></shopcontent>
        <mgjfooter></mgjfooter>
    </div>
</template>
<script type="text/ecmascript-6">
    import shopheader from "../components/shoppingcar/shopheader.vue";
    import mgjfooter from "../components/commons/mgjfooter.vue";
    import shopcontent from "../components/shoppingcar/shopcontent.vue";
    import shoppingcar from "../../apis/shoppingcar";
    export default {
        components:{
            shopheader,
            mgjfooter,
            shopcontent
        },
        created:function(){
            this.initdata();
        },
        methods:{
            adds:function (idx) {
                this.shopcardata[idx].num++;
                this.counter(this.shopcardata);
            },
            subs:function (idx) {
                if(this.shopcardata[idx].num <=1){
                    this.shopcardata[idx].num =1
                }else{
                    this.shopcardata[idx].num--;
                    this.counter(this.shopcardata);
                }
            },
            counter:function (data) {
                this.tnum=0;
                this.tmoney=0;
                data.forEach((item,index)=>{
                    this.tnum += item.num;
                    this.tmoney += item.num * item.money;
                })
            },
            initdata:function(){
                shoppingcar.getshopdata((data)=>{
                    this.shopcardata=data;
                })
            }
        },
        data(){
            return{
                tnum:0,
                tmoney:0,
                shopcardata:[]
            }
        }
    }
</script>

<style scoped>
    #gouwuche{
        color:#FF5977;
    }
</style>